<!--
 * @Author: 260156 260156@gree.com.cn
 * @Date: 2022-08-15 11:26:20
 * @LastEditors: 260156 260156@gree.com.cn
 * @LastEditTime: 2022-10-14 10:57:57
 * @FilePath: \gree-zst-web\src\views\manage\log\log.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 260156 260156@gree.com.cn, All Rights Reserved. 
-->
<template>
  <div>
    <log-header
      v-model="time"
      @handleSearch="handleSearch"
      @handleDownload="handleDownload"
      :loading="loading"
    ></log-header>
    <log-main
      :tableData="tableData"
      :loading="loading"
      @handleSearch="handleSearch"
    ></log-main>
    <log-footer
      :total="pageData.total"
      v-model:current-page="pageData.currentPage"
      v-model:page-size="pageData.pageSize"
      @change="handlePageChange"
    >
    </log-footer>
  </div>
</template>
<script lang="ts" setup>
import LogHeader from "./components/LogHeader.vue";
import LogMain from "./components/LogMain.vue";
import LogFooter from "./components/LogFooter.vue";
import { getLog, downloadLog } from "api/manage/manage";
import type { LogListItem, GetLogListParams } from "api/manage/model/manage";
import type { PageData } from "@/components/pagination/types";

const loading = ref<boolean>(false);

const time = ref<Array<string>>(["", ""]);

const pageData: PageData = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,
});
const tableData = ref<LogListItem[]>([]);

let params!: GetLogListParams;
const getTableData = () => {
  loading.value = true;
  params = {
    currentPage: pageData.currentPage,
    pageSize: pageData.pageSize,
    operationStartTime: time.value ? time.value[0] : "",
    operationEndTime: time.value ? time.value[1] : "",
  };
  getLog(params)
    .then((res) => {
      tableData.value = res.list;
      pageData.total = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSearch = () => {
  pageData.currentPage = 1;
  getTableData();
};
handleSearch();

const handleDownload = () => {
  downloadLog(params, {
    fileName: "操作日志",
  }).then((res) => {});
};

const handlePageChange = () => {
  getTableData();
};
</script>
